<template>

  <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="100px">
    <el-form-item label="企业名称" prop="collieryName">
      <el-input clearable :maxlength="50" v-model="queryParams.collieryName" placeholder="请输入企业名称"
        @keyup.enter="handleQuery" class="!w-200px" />
    </el-form-item>
    <el-form-item label="煤种名称" prop="coalName">
      <el-input clearable :maxlength="50" v-model="queryParams.coalName" placeholder="请输入煤种名称"
        @keyup.enter="handleQuery" class="!w-200px" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleQuery">搜索</el-button>
      <el-button @click="resetQuery">重置</el-button>
    </el-form-item>
  </el-form>
  <div class="flex justify-between py-12px">
    <div>
      <el-button type="primary" @click="openForm()" v-hasPermi="['mst:coalTypePriceManage:create']">新增</el-button>
    </div>
  </div>
  <el-table v-loading="loading" :data="list" border stripe
    :header-cell-style="{ background: '#F3F4F7', color: '#555' }">
    <el-table-column label="所属企业" align="center" prop="collieryName" min-width="200" fixed="left"
      :show-overflow-tooltip="true" />
    <el-table-column label="煤种名称" align="center" prop="coalName" min-width="150" fixed="left"
      :show-overflow-tooltip="true" />
    <el-table-column label="坑口价" align="center" prop="pitPrice" min-width="100" :show-overflow-tooltip="true" />
    <el-table-column label="热值" align="center" prop="calorificValue" width="100" :show-overflow-tooltip="true" />
    <el-table-column label="硫" align="center" prop="sulfur" width="100" :show-overflow-tooltip="true" />
    <el-table-column label="灰" align="center" prop="ash" width="100" :show-overflow-tooltip="true" />
    <el-table-column label="全水" align="center" prop="allWater" min-width="100" :show-overflow-tooltip="true" />
    <el-table-column label="内水" align="center" prop="mad" width="100" :show-overflow-tooltip="true" />
    <el-table-column label="灰熔点" align="center" prop="ashFusionPoint" width="100" :show-overflow-tooltip="true" />
    <el-table-column label="可磨指数" align="center" prop="grindabilityIndex" width="100" :show-overflow-tooltip="true" />
    <el-table-column label="焦渣特征" align="center" prop="panBreeze" width="150" :show-overflow-tooltip="true" />
    <el-table-column label="挥发分" align="center" prop="volatileMatter" width="100" :show-overflow-tooltip="true" />
    <el-table-column label="化验报告" align="center" prop="assayReport" width="100" :show-overflow-tooltip="true">
      <template #default="{ row }">
        <el-popover v-if="row.assayReport?.url" :width="340" placement="top-start" trigger="click"
          popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;">
          <template #reference>
            <el-button link type="primary">查看</el-button>
          </template>
          <template #default>
            <el-image style="width: auto; height: 150px" :src="row.assayReport?.url"
              :preview-src-list="[row.assayReport?.url]" />
          </template>
        </el-popover>
        <span v-else>暂无图片</span>
      </template>
    </el-table-column>
    <el-table-column label="价格时间" align="center" prop="priceTime" width="200" :show-overflow-tooltip="true" />
    <el-table-column label="新增时间" align="center" prop="createTime" width="200" :formatter="dateFormatter"
      :show-overflow-tooltip="true" />
    <el-table-column label="更新时间" align="center" prop="updateTime" width="200" :formatter="dateFormatter"
      :show-overflow-tooltip="true" />
    <el-table-column label="数据来源" align="center" prop="platformSource" width="150" :show-overflow-tooltip="true">
      <template #default="{row}">
        <span>{{ getDictLabel(DICT_TYPE.PLATFORM_SOURCE, row.platformSource?.toString()) }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center" prop="operation" width="150" fixed="right">
      <template #default="{row}">
        <el-button link type="primary" @click="deleteData(row.id)" v-if="row.platformSource===3"
          v-hasPermi="['mst:coalTypePriceManage:delete']">
          删除
        </el-button>
        <el-button link type="primary" @click="openForm(row.id)" v-hasPermi="['mst:coalTypePriceManage:update']">
          编辑
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
    @pagination="getList" />
  <inputForm ref="inputFormRef" @success="resetQuery"></inputForm>
</template>
<script setup lang="ts" name="enterpriseManage">
  import * as Utils from '@/utils/dict'
  import inputForm from './inputForm.vue'
  import * as coalMarket from '@/api/coalMarket'
  import { dateFormatter } from '@/utils/formatTime'

  const { DICT_TYPE, getIntDictOptions, getDictLabel } = reactive(Utils)
  const loading = ref(false) // 列表的加载中
  const message = useMessage()
  const total = ref(0) // 列表的总页数
  const list = ref([]) // 列表的数据
  const queryParams = ref({
    pageNo: 1,
    pageSize: 10,
    collieryName: undefined,
    coalName: undefined
  })
  const queryFormRef = ref()
  const inputFormRef = ref()

  /** 查询列表 */

  const getList = async () => {
    loading.value = true
    try {
      const data = await coalMarket.getPriceMgrPage(queryParams.value)
      list.value = data.list || []
      total.value = data.total || 0
    } finally {
      loading.value = false
    }
  }

  const openForm = (id) => {
    inputFormRef.value.open(id)
  }

  const deleteData = (id) => {
    ElMessageBox.confirm('是否确认删除【企业简称】下的【煤种名称】价格数据？', '删除确认', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      deletePriceMgrInfo(id)
    })
  }

  const deletePriceMgrInfo = async (id) => {
    const res = await coalMarket.deletePriceMgrInfo({ id })
    if (res) {
      message.success('删除成功')
      resetQuery()
    }
  }

  /** 搜索按钮操作 */
  const handleQuery = () => {
    queryParams.value.pageNo = 1
    getList()
  }

  /** 重置按钮操作 */
  const resetQuery = () => {
    queryFormRef.value.resetFields()
    handleQuery()
  }

  /** 初始化 **/
  onMounted(() => {
    getList()
  })
</script>